<div>
    <x-header>
        @include('partials.category')
    </x-header>

    <div class="py-4 grid grid-cols-1 divide-y whitespace-nowrap" wire:ignore>
        <div class="p-2 flex items-center gap-2 text-sm leading-relaxed">
            <a wire:navigate href="{{ request()->fullUrlWithoutQuery('sortBy') }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request()->missing('sortBy')])>最新排行</a>
            <a wire:navigate href="{{ request()->fullUrlWithQuery(['sortBy' => 'hot_count']) }}" @class(['px-2 rounded-full', 'text-red-500 border border-red-500' => request('sortBy') === 'hot_count'])>人气排行</a>
        </div>

        <div class="p-2 flex items-center gap-2 text-sm leading-relaxed">
            <a wire:navigate href="{{ request()->fullUrlWithoutQuery('abbr') }}" class="flex-none px-2 rounded-full text-red-500 border border-red-500">字母排序</a>
            <div class="flex items-center overflow-x-auto" x-init="document.querySelector('.abbr-active')?.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'})">
                @for($x = ord('a'); $x <= ord('z'); $x++)
                    @php($v = Str::of(chr($x))->upper()->value())
                    <a wire:navigate href="{{ request()->fullUrlWithQuery(['abbr' => $v]) }}" @class(['px-2 rounded-full', 'abbr-active text-red-500 border border-red-500' => request('abbr') === $v])>{{ $v }}</a>
                @endfor
            </div>
        </div>
    </div>

    @if($collection->isEmpty())
        @include('partials.oops')
    @else
        <div class="grid grid-cols-4 gap-2 px-2 text-sm py-4">
            @foreach($collection as $actor)
                <x-actor-item :actor="$actor" :key="$actor->id"/>
            @endforeach
        </div>

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
